<template>
    <div class="flexbox flexcolumn height_100">
        <div class="flex over_box">
            <el-form ref="createform" :model="dataForm" label-position="top" class="create_form" :hide-required-asterisk='true' size="small">
                <div class="com_box">
                    <StepBox :dataForm="dataForm" />
                    <Target :dataForm="dataForm" @sessionSave="sessionSave" />
                </div>
                <div class="com_box mt_12">
                    <div class="pl_20 pr_20 pb_20">
                        <div class="tk_title">广告系列</div>
                        <PtSelect :dataForm="dataForm" @sessionSave="sessionSave"/>
                        <PtName :dataForm="dataForm" @sessionSave="sessionSave" />
                        <PtStatus :dataForm="dataForm" @sessionSave="sessionSave" />
                        <PtBudget :dataForm="dataForm" @sessionSave="sessionSave" />
                    </div>
                </div>
            </el-form>
        </div>
        <div class="tk_footer com_box mt_12">
            <el-button plain class="el-button-width plain_red" size="small" @click="cancelCreation">取消创建</el-button>
            <el-button plain class="el-button-width" size="small" @click="preStep">上一步</el-button>
            <el-button type="primary" size="small" class="el-button-width" @click="nextOne('createform')">下一步</el-button>
        </div>
    </div>
</template>

<script>
import { mixins } from "@/assets/js/tkmixins.js";
import "@/assets/css/tiktok.css";
import StepBox from "./model/StepBox";
import Target from "./model/Target";
import PtName from "./model/PtName";
import PtStatus from "./model/PtStatus";
import PtBudget from "./model/PtBudget";
import PtSelect from "./model/PtSelect";
export default {
    mixins: [mixins],
    props: ["dataForm"],
    components: {
        StepBox,
        Target,
        PtName,
        PtStatus,
        PtBudget,
        PtSelect
    },
    name: "",
    data() {
        return {
            noset: "",
        };
    },
    created() {
        console.log(this.dataForm);
    },
    methods: {
        // 提交添加
        nextOne(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    this.dataForm.step = 3;
                    window.sessionStorage.setItem(
                        "tkForm",
                        JSON.stringify(this.dataForm)
                    );
                } else {
                    this.loading = false;
                    this.$message.error("请完善信息！");
                    return false;
                }
            });
        },

         // 上一步
        preStep() {
            this.dataForm.step = 1;
            this.sessionSave();
        },

        sessionSave() {
            window.sessionStorage.setItem(
                "tkForm",
                JSON.stringify(this.dataForm)
            );
        },
    },
};
</script>


<style scoped>
</style>

